<!-- 备件管理-备件盘点页面 -->
<template>
  <div>
    <div v-show="isMain" class="equip-wrap-common">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="盘点组名称">
              <px-input
                v-model="queryParams.groupName"
                placeholder="请输入盘点组名称"
                maxlength="50"
                clearable
                @blur="queryParams.groupName = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="equip-table-btn">
        <px-button v-has="'ALL_EQUIP_TOOLMANAGE_GROUP_ADD'" type="primary" @click="addToolGroup">新增</px-button>
      </div>
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 353px)" border>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" min-width="150" align="center">
          <template #default="scope">
            <!-- 详情 -->
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'ALL_EQUIP_TOOLMANAGE_GROUP_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
            <!-- 编辑 -->
            <px-tooltip content="编辑" placement="top">
              <px-button v-has="'ALL_EQUIP_TOOLMANAGE_GROUP_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <!-- 删除 -->
            <px-tooltip content="删除" placement="top">
              <px-button v-has="'ALL_EQUIP_TOOLMANAGE_GROUP_DELETE'" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <!-- 详情新增/编辑页面 -->
    <AddToolGroup
      :isMain="isMain"
      :isView="isView"
      :drawerType="drawerType"
      :groupId="groupId"
      @queryTable="queryTable"
      @backMainPage="backMainPage"
    />
    <!-- 详情查看页面 -->
    <ViewToolGroup :isMain="isMain" :isView="isView" :groupId="groupId" @queryTable="queryTable" @backMainPage="backMainPage" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_TOOLMANAGE_GROUP"
});

import { delToolGroup, queryToolGroup } from "@/api/equip/toolManage";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";
import AddToolGroup from "./components/AddToolGroup.vue";
import ViewToolGroup from "./components/ViewToolGroup.vue";

const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  queryParams: {
    groupName: "",
    className: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "groupName", label: "盘点组名称", minWidth: "160", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "140", showOverflowTooltip: true },
    { prop: "createName", label: "创建人", minWidth: "140", showOverflowTooltip: true },
    { prop: "updateTime", label: "更新时间", minWidth: "240", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  drawerType: "add",
  groupId: ""
});
const { isMain, isView, queryParams, tableColumns, tableData, total, drawerType, groupId } = toRefs(state);

// 进入页面时触发
onMounted(() => queryTable());

// 查询盘点组列表
const queryTable = async () => {
  const data = await queryToolGroup(queryParams.value);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和列表
const resetTable = async () => {
  queryParams.value = {
    groupName: "",
    className: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};

// 查看盘点详情
const handleView = (row: any) => {
  groupId.value = row.id;
  isMain.value = false;
  isView.value = true;
};

// 添加盘点详情
const addToolGroup = () => {
  drawerType.value = "add";
  isMain.value = false;
  isView.value = false;
};

// 编辑盘点详情
const handleEdit = (row: any) => {
  drawerType.value = "edit";
  groupId.value = row.id;
  isMain.value = false;
  isView.value = false;
};
// 删除盘点组
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前工具盘点组“${row.groupName}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await delToolGroup(row.id);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
// 从新增/编辑、详情返回主页面
const backMainPage = () => {
  isMain.value = true;
};

// 外部封装好的组件
// 厂区组件调用父组件
const changeFactory = val => {
  queryParams.value.facCode = val;
};

// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
